﻿<!DOCTYPE html>
<html>
<head>
    <title>Pixi example</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }

    </style>


    <script src="../../js/pixi3.dev.js"></script>
    <script src="../../dist/EZGUI.js"></script>
</head>
<body>
    <script>
        var guiObj = {
            id: 'main',
            component: 'Window',
            header: { id: 'ttl', skin: 'blueheader', position: { x: 0, y: 0 }, height: 40, text: 'Title' },
            draggable: true,
            padding: 4,
            position: { x: 0, y: 0 },
            width: 600,
            height: 550,


            layout: [1, 3],
            children: [
                {
                    component: 'Layout',
                    position: { x: 0, y: 0 },
                    width: 500,
                    height: 150,
                    layout: [2, 1],

                    children: [
                          {
                              id: 'btn1',
                              text: 'btn',
                              font: {
                                  size: '42px',
                                  family: 'Skranji',
                                  color: 'red'
                              },
                              component: 'Button',
                              skin: 'bluebutton',
                              position: 'center',
                              width: 190,
                              height: 80
                          },
                          {
                              component: 'Layout',
                              position: { x: 0, y: 0 },
                              width: 250,
                              height: 140,
                              layout: [1, 4],
                              children: [
                                  { id: 'radio1', text: 'choice 1', component: 'Radio', group: 1, position: 'center', width: 30, height: 30 },
                                  { id: 'radio2', text: 'choice 2', component: 'Radio', group: 1, position: 'center', width: 30, height: 30 },
                                  { id: 'radio3', text: 'choice 3', component: 'Radio', group: 1, position: 'center', width: 30, height: 30 },
                                  { id: 'radio4', text: 'choice 4', component: 'Radio', group: 1, position: 'center', width: 30, height: 30 }
                              ]
                          }
                    ]
                },

            {
                id: 'hlist1',
                component: 'List',

                padding: 3,
                position: 'center',
                width: 400,
                height: 150,
                layout: [4, null],
                children: [
                    { component: 'Button', position: 'center', width: 90, height: 120 },
                    null,
                    { component: 'Button', position: 'center', width: 90, height: 120 },
                    { component: 'Button', position: 'center', width: 90, height: 120 },
                    { component: 'Button', position: 'center', width: 90, height: 120 },
                    { component: 'Button', position: 'center', width: 90, height: 120 },
                    { component: 'Button', position: 'center', width: 90, height: 120 },
                    { component: 'Button', position: 'center', width: 90, height: 120 },
                    { component: 'Button', position: 'center', width: 90, height: 120 },
                    { component: 'Button', position: 'center', width: 90, height: 120 },
                    { component: 'Button', position: 'center', width: 90, height: 120 },
                ]
            },
              {
                  id: 'btn2',
                  component: 'Checkbox',

                  position: 'center',
                  text: 'Checkbox',
                  width: 30,
                  height: 30

              }
            ]
        }



        // create an new instance of a pixi stage
        // the second parameter is interactivity...
        var interactive = true;
        var renderer = PIXI.autoDetectRenderer(820, 800); //new PIXI.CanvasRenderer(820, 800);//
        



        var stage = new PIXI.Stage(0x000000, interactive);


        // add the renderer view element to the DOM
        document.body.appendChild(renderer.view);
        var guiContainer, theme;
        
        
        function onAssetsLoaded() {



            requestAnimationFrame(animate);
            //sprite.setTexture(texture2);


            EZGUI.Theme.load(['../../assets/kenney-theme/kenney-theme.json'], function () {

                guiContainer = EZGUI.create(guiObj, 'kenney');//new EZGUI.GUISprite(guiObj, guiTheme);
                //guiContainer.visible = false;

                EZGUI.components.btn1.on('click', function (event) {
                    console.log('clicked', event);
                });

                stage.addChild(guiContainer);

            });



            function animate() {

                requestAnimationFrame(animate);
                renderer.render(stage);
            }
        }


        onAssetsLoaded();


        
    </script>
    <script src="../../js/ga.js"></script>
</body>
</html>
